<template>
    <div>
      <!--放大镜-->
      <div style="width:200px;height: 200px;">
        <pic-zoom :url="image_url" :big-url="image_url" :scale="3"></pic-zoom>
      </div>
      <span class="demonstration">国家/省份/城市/地区</span>
      <el-cascader
        :options="options"
        v-model="selectedOptions"
        @change="handleChange"
        :separator="' '"
      >
      </el-cascader>
      <div>
        <el-button @click="testClick">支付宝请求</el-button>
      </div>
    </div>
</template>

<script>

  import city from '../../cityData/country-data'
  import PicZoom from 'vue-piczoom'
  import bgImg from '../../assets/images/image/timg.jpg'
  import HttpRequest from "../../http/HttpRequest"
  import api from "../../http/api/api"

    export default {
      name: "magnifying",
      components: {
        PicZoom
      },
      data() {
        return {
          selectedOptions: [],//存放默认值
          options:city,   //存放城市数据
          image_url: bgImg
        }
      },
      methods:{
        testClick(){
          HttpRequest.HttpGet(api.getPrice,false).then(res=>{
            console.log('请求支付宝--------',res)
          })
        },
        handleChange(value) {
          console.log(value);
        }
      }
    }
</script>

<style scoped>

</style>
